<template>
    <view class="bottom">
        <Header></Header>
        <view class="info">
            <u-icon style="border: 1px #00eaff solid;border-radius: 50%;margin-left: 50rpx;margin-right: 20rpx"
                    name="arrow-left" color="#00eaff" @click="back"></u-icon>
            <text style="color: #00eaff;padding-right: 30rpx">Return</text>
        </view>
<!--        <view class="avatar" style="">-->
<!--            <u-avatar style="border: pink 1px solid;margin-left: 50rpx" :src="user.avatar"></u-avatar>-->
<!--            <text style="margin-left: 80rpx;color: white">{{ user.nickname }}</text>-->
<!--        </view>-->
        <view class="security" style="" @click="back">
            <text class="text">
                Account security
            </text>
        </view>
        <view class="userinfo">
            <view class="userinfo-item">
                <view class="left">
                    <u-icon name="account-fill"></u-icon>
                    <text style="margin-left: 20rpx">Change nickname</text>
                </view>
                <view class="center">
                    {{ user.nickname }}
                </view>
                <view class="right">
                    <u-button class="custom-style" shape="circle" size="mini" @click="modifyNickname">
                        <uni-icons type="compose" size="20" color="#ffffff"></uni-icons>
                    </u-button>
                </view>
            </view>

            <!--            <view class="userinfo-item">-->
            <!--                <view class="left">-->
            <!--                    <u-icon name="phone-fill"></u-icon>-->
            <!--                    <text style="margin-left: 20rpx">换绑手机</text>-->
            <!--                </view>-->
            <!--                <view class="center">-->
            <!--                    {{ user.mobile }}-->
            <!--                </view>-->
            <!--                <view class="right">-->
            <!--                    <u-button class="custom-style" shape="circle" size="mini" @click="changemobile">-->
            <!--                        <uni-icons type="compose" size="20" color="#ffffff"></uni-icons>-->
            <!--                    </u-button>-->
            <!--                </view>-->
            <!--            </view>-->
            <view class="userinfo-item">
                <view class="left">
                    <u-icon name="lock"></u-icon>
                    <text style="margin-left: 20rpx">Change password</text>
                </view>
                <view class="center">
                    <!--                    {{ user.mobile }}-->
                </view>
                <view class="right">
                    <u-button class="custom-style" shape="circle" size="mini" @click="changePassword">
                        <uni-icons type="compose" size="20" color="#ffffff"></uni-icons>
                    </u-button>
                </view>
            </view>

            <!--            <view class="userinfo-item">-->
            <!--                <view class="left">-->
            <!--                    <u-icon name="lock-fill"></u-icon>-->
            <!--                    <text style="margin-left: 20rpx">重置密码</text>-->
            <!--                </view>-->
            <!--                <view class="center">-->
            <!--                </view>-->
            <!--                <view class="right">-->
            <!--                    <u-button class="custom-style" shape="circle" size="mini" @click="resetpwd">-->
            <!--                        <uni-icons type="compose" size="20" color="#ffffff"></uni-icons>-->
            <!--                    </u-button>-->
            <!--                </view>-->
            <!--            </view>-->
            <view class="userinfo-item">
                <view class="left">
                    <u-icon name="share-fill"></u-icon>
                    <text style="margin-left: 20rpx">My invitation code</text>
                </view>
                <view class="center">
                    {{ user.sharecode }}
                </view>
                <view class="right">
                    <u-button class="custom-style" shape="circle" size="mini" @click="copyShareCode">
                        copy
                    </u-button>
                </view>
            </view>
        </view>
        <!--  修改昵称弹窗  -->
        <view>
            <u-popup border-radius="25" mode="center" v-model="modifyNicknameShow" closeable :width="windowsWidth+'px'">
                <view class="popupView">
                    <h2 class="popupView-text">Change nickname</h2>
                    <u-input placeholder="Please enter your nickname" v-model="nickname" type="text" border
                             class="popupView-input"
                             focus/>
                    <view class="popupView-button">
                        <u-button type="info" shape="circle" @click="modifyNicknameShow = false" size="medium"
                                  class="popupView-button-item">
                            Cancel
                        </u-button>
                        <u-button shape="circle" size="medium" type="success"
                                  class="popupView-button-item" @click="modifyNicknameConfirm">
                            Confirm
                        </u-button>
                    </view>
                </view>
            </u-popup>
        </view>
        <view>
            <u-popup border-radius="25" class="updatePassword" mode="center" v-model="updatePasswordShow" closeable
                     :width="windowsWidth+'px'">
                <view class="popupView">
                    <h2 class="popupView-text">Change password</h2>
                    <u-input placeholder="Please enter your old password" class="popupView-input"
                             v-model="updatePassword.oldPassword"
                             type="password" border password-icon focus/>
                    <u-input placeholder="Please enter a new password" class="popupView-input"
                             v-model="updatePassword.newPassword"
                             type="password" border password-icon/>
                    <!--                <text style="font-size: 10px;position: absolute;margin-top: 290rpx">密码长度在6-18之间</text>-->
                    <u-input placeholder="Please enter a confirmation password" class="popupView-input"
                             v-model="updatePassword.newPassword1"
                             type="password" border password-icon/>
                    <view class="popupView-button">
                        <u-button class="popupView-button-item" type="info" @click="updatePasswordShow = false"
                                  size="medium">
                            Cancel
                        </u-button>
                        <u-button class="popupView-button-item" type="success" @click="updatePwd" size="medium">
                            Confirm
                        </u-button>
                    </view>
                </view>
            </u-popup>
        </view>
        <!--  修改手机号弹窗  -->
        <!--        <view>-->
        <!--            <u-popup border-radius="25" mode="center" v-model="changemobileShow" closeable :width="windowsWidth+'px'">-->
        <!--                <view class="popupView">-->
        <!--                    <h2 class="popupView-text">修改绑定手机号</h2>-->
        <!--                    <u-input v-model="changemobileForm.mobile" type="number" placeholder="请输入手机号" border-->
        <!--                             class="popupView-input" focus/>-->
        <!--                    <view class="popupView-imgCode">-->
        <!--                        <u-input v-model="changemobileForm.imgCode" type="number" placeholder="请输入验证码"-->
        <!--                                 maxlength="4" border/>-->
        <!--                        <u-image width="40%" :src="captchaDataUrl"-->
        <!--                                 @click="changemobileCaptchaLoaded"></u-image>-->
        <!--                    </view>-->
        <!--                    <view class="popupView-captcha">-->
        <!--                        <u-input v-model="changemobileForm.captcha" type="number" placeholder="请输入短信验证码"-->
        <!--                                 maxlength="6" border/>-->
        <!--                        <u-verification-code seconds=60 ref="changemobileCaptcha"-->
        <!--                                             @change="captchaChange"></u-verification-code>-->
        <!--                        <u-button @tap="changemobileGetCode" type="primary" size="medium">{{ tips }}</u-button>-->
        <!--                    </view>-->
        <!--                    <view class="popupView-button">-->
        <!--                        <u-button type="info" shape="circle" @click="changemobileShow = false" size="medium"-->
        <!--                                  class="popupView-button-item">-->
        <!--                            取 消-->
        <!--                        </u-button>-->
        <!--                        <u-button shape="circle" size="medium" type="success"-->
        <!--                                  class="popupView-button-item" @click="changemobileConfirm">-->
        <!--                            确 定-->
        <!--                        </u-button>-->
        <!--                    </view>-->
        <!--                </view>-->
        <!--            </u-popup>-->
        <!--        </view>-->
        <!--  重置密码弹窗  -->
        <!--        <view>-->
        <!--            <u-popup border-radius="25" mode="center" v-model="resetpwdShow" closeable :width="windowsWidth+'px'">-->
        <!--                <view class="popupView">-->
        <!--                    <h2 class="popupView-text">重置密码</h2>-->
        <!--                    <u-input v-model="resetpwdForm.mobile" type="number" placeholder="请输入手机号" border-->
        <!--                             class="popupView-input" focus/>-->
        <!--                    <u-input placeholder="请输入新密码" v-model="resetpwdForm.newpassword" type="password" border-->
        <!--                             password-icon class="popupView-input"/>-->
        <!--                    <view class="popupView-imgCode">-->
        <!--                        <u-input v-model="resetpwdForm.imgCode" type="number" placeholder="请输入验证码"-->
        <!--                                 maxlength="4" border/>-->
        <!--                        <u-image width="40%" :src="captchaDataUrl"-->
        <!--                                 @click="resetpwdCaptchaLoaded"></u-image>-->
        <!--                    </view>-->
        <!--                    <view class="popupView-captcha">-->
        <!--                        <u-input v-model="resetpwdForm.captcha" type="number" placeholder="请输入短信验证码"-->
        <!--                                 maxlength="6" border/>-->
        <!--                        <u-verification-code seconds=60 ref="resetpwdCaptcha"-->
        <!--                                             @change="captchaChange"></u-verification-code>-->
        <!--                        <u-button @tap="resetpwdFormGetCode" type="primary" size="medium">{{ tips }}</u-button>-->
        <!--                    </view>-->
        <!--                    <view class="popupView-button">-->
        <!--                        <u-button type="info" shape="circle" @click="resetpwdShow = false" size="medium"-->
        <!--                                  class="popupView-button-item">-->
        <!--                            取 消-->
        <!--                        </u-button>-->
        <!--                        <u-button shape="circle" type="success" size="medium"-->
        <!--                                  class="popupView-button-item" @click="resetpwdConfirm">-->
        <!--                            确 定-->
        <!--                        </u-button>-->
        <!--                    </view>-->
        <!--                </view>-->
        <!--            </u-popup>-->
        <!--        </view>-->
        <!-- 提示框 -->
        <u-toast ref="uToast"/>
        <custom-tabbar></custom-tabbar>
    </view>
</template>

<script>
import Header from "@/components/header/header.vue";
import CustomTabbar from "@/components/tabbar/tabbar.vue";

export default {
    name: "myInfo",
    components: {
        CustomTabbar,
        Header
    },
    computed: {
        user() {
            return this.$store.getters.getUser ? this.$store.getters.getUser : {};
        }
    },
    data() {
        return {
            windowsWidth: 0,
            // 修改昵称
            modifyNicknameShow: false,
            nickname: '',
            updatePasswordShow: false,//修改密码弹窗
            updatePassword: { //修改密码表单
                oldPassword: '',
                newPassword: '',
                newPassword1: ''
            },
            // 换绑手机
            changemobileShow: false,
            changemobileForm: {
                mobile: '',
                // 图片验证码
                imgCode: '',
                // 验证的key
                key: '',
                // 验证码
                captcha: '',
            },
            // 重置密码
            resetpwdShow: false,
            resetpwdForm: {
                mobile: '',
                newpassword: '',
                // 图片验证码
                imgCode: '',
                // 验证的key
                key: '',
                // 验证码
                captcha: '',
            },
            captchaDataUrl: '', // 用于保存解码后的图片 URL
            tips: '',

        };
    },
    mounted() {
        this.windowsWidth = this.$store.getters.getWindowsWidth;
        document.documentElement.style.setProperty('--windows-width', this.windowsWidth + 'px');
    },
    methods: {
        // 返回
        back() {
            uni.navigateBack()
        },
        // 修改昵称
        modifyNickname() {
            this.nickname = ''
            this.modifyNicknameShow = true
        },
        // 确认修改昵称
        modifyNicknameConfirm() {
            this.$u.api.modifyNickname({
                nickname: this.nickname
            }).then(res => {
                if (res.code === 1) {
                    this.$refs.uToast.show({
                        title: res.msg,
                        type: 'success'
                    });
                    this.$u.api.getUserInfo().then(response => {
                        if (response.code === 1) {
                            const user = response.data;
                            // 提交mutation来更新Vuex中的状态
                            this.$store.commit('user/SET_USER', user);
                            // 保存到本地存储
                            uni.setStorageSync('user', user);
                        }
                    })
                    this.modifyNicknameShow = false
                } else {
                    this.$refs.uToast.show({
                        title: res.msg,
                        type: 'error'
                    });
                }
            })
        },
        // 换绑手机
        changemobile() {
            this.changemobileForm = {}
            this.changemobileShow = true
            this.changemobileFetchCaptcha()
        },
        //获取图形验证码
        async changemobileFetchCaptcha() {
            await this.$u.api.getCaptcha({
                event: 'create'
            }).then(res => {
                this.changemobileForm.key = res.data.key
                const response = res.data.captcha
                this.captchaDataUrl = 'data:image/png;base64,' + response;
            })
        },
        //点击刷新验证码
        changemobileCaptchaLoaded() {
            // 触摸验证码图片刷新
            this.changemobileFetchCaptcha()
        },
        // 换绑手机发送短信
        changemobileSendSms(callback) {
            if (this.changemobileForm.mobile === '') {
                this.$u.toast('请输入手机号');
                return;
            }
            if (!this.$u.test.mobile(this.changemobileForm.mobile)) {
                this.$u.toast('手机号码不正确');
                return;
            }
            if (!this.changemobileForm.imgCode) {
                this.$u.toast('请输入图形验证码');
                return;
            }
            this.$u.api.smsSend({
                mobile: this.changemobileForm.mobile,
                event: 'changemobile',
                imgCode: this.changemobileForm.imgCode,
                key: this.changemobileForm.key
            }).then(res => {
                if (res.code !== 1) {
                    this.$refs.uToast.show({
                        title: res.msg,
                        type: 'error'
                    });
                    this.fetchCaptcha()
                    callback(false);
                } else {
                    callback(true);
                }
            });
        },
        // 发送短信按钮操作
        captchaChange(text) {
            this.tips = text;
        },
        // 获取验证码
        changemobileGetCode() {
            this.changemobileSendSms((isValid) => {
                if (isValid) {
                    if (this.$refs.changemobileCaptcha.canGetCode) {
                        setTimeout(() => {
                            uni.hideLoading();
                            // 这里此提示会被this.start()方法中的提示覆盖
                            this.$refs.uToast.show({
                                title: '验证码已发送,请注意查收',
                                type: 'success'
                            });
                            // 通知验证码组件内部开始倒计时
                            this.$refs.changemobileCaptcha.start();
                        }, 1000);
                    } else {
                        this.$refs.uToast.show({
                            title: '倒计时结束后再发送',
                            type: 'success'
                        });
                    }
                }
            })
        },
        // 修改密码
        changePassword() {
            this.updatePassword = {}
            this.updatePasswordShow = true
        },
        //修改密码
        updatePwd() {
            const passwordRegex = /^[0-9A-Za-z]{8,12}$/;
            if (!this.updatePassword.oldPassword) {
                this.$u.toast('Please enter your old password');
                return;
            }
            if (!this.updatePassword.newPassword) {
                this.$u.toast('Please enter a new password');
                return;
            }
            if (!this.updatePassword.oldPassword) {
                this.$u.toast('Please enter a confirmation password');
                return;
            }
            if (!passwordRegex.test(this.updatePassword.newPassword)) {
                this.$u.toast('The password length is between 8-12 and can only contain letters and numbers');
                return;
            }
            if (this.updatePassword.newPassword !== this.updatePassword.newPassword1) {
                this.$u.toast('The new password does not match the confirmed password');
                return;
            }
            this.$u.api.updatePassword({
                oldpassword: this.updatePassword.oldPassword,
                newpassword: this.updatePassword.newPassword
            }).then(res => {
                if (res.code === 1) {
                    this.$refs.uToast.show({
                        title: res.msg,
                        type: 'success'
                    })
                    this.$u.api.getUserInfo().then(res => {
                        if (res.code === 1) {
                            const user = res.data;
                            // 提交mutation来更新Vuex中的状态
                            this.$store.commit('user/SET_USER', user);
                            // 保存到本地存储
                            uni.setStorageSync('user', user);
                        }
                    })
                    this.updatePasswordShow = false
                    this.updatePassword = {}
                } else {
                    this.$refs.uToast.show({
                        title: res.msg,
                        type: 'error'
                    })
                }
            })
        },
        // 确认换绑
        changemobileConfirm() {
            if (this.changemobileForm.mobile === '') {
                this.$u.toast('请输入手机号');
                return;
            }
            if (!this.$u.test.mobile(this.changemobileForm.mobile)) {
                this.$u.toast('手机号码不正确');
                return;
            }
            if (!this.changemobileForm.imgCode) {
                this.$u.toast('请输入图形验证码');
                return;
            }
            this.$u.api.changemobile({
                mobile: this.changemobileForm.mobile,
                captcha: this.changemobileForm.captcha
            }).then(res => {
                if (res.code === 1) {
                    this.$refs.uToast.show({
                        title: res.msg,
                        type: 'success'
                    });
                    this.$u.api.getUserInfo().then(response => {
                        if (response.code === 1) {
                            const user = response.data;
                            // 提交mutation来更新Vuex中的状态
                            this.$store.commit('user/SET_USER', user);
                            // 保存到本地存储
                            uni.setStorageSync('user', user);
                        }
                    })
                    this.changemobileShow = false
                } else {
                    this.$refs.uToast.show({
                        title: res.msg,
                        type: 'error'
                    });
                }
            })
        },
        // 重置密码
        resetpwd() {
            this.resetpwdForm = {}
            this.resetpwdFetchCaptcha()
            this.resetpwdShow = true
        },
        //获取图形验证码
        async resetpwdFetchCaptcha() {
            await this.$u.api.getCaptcha({
                event: 'create'
            }).then(res => {
                this.resetpwdForm.key = res.data.key
                const response = res.data.captcha
                this.captchaDataUrl = 'data:image/png;base64,' + response;
            })
        },
        //点击刷新验证码
        resetpwdCaptchaLoaded() {
            // 触摸验证码图片刷新
            this.resetpwdFetchCaptcha()
        },
        // 重置密码获取验证码
        resetpwdFormGetCode() {
            this.resetpwdSendSms((isValid) => {
                if (isValid) {
                    if (this.$refs.resetpwdCaptcha.canGetCode) {
                        setTimeout(() => {
                            uni.hideLoading();
                            // 这里此提示会被this.start()方法中的提示覆盖
                            this.$refs.uToast.show({
                                title: '验证码已发送,请注意查收',
                                type: 'success'
                            });
                            // 通知验证码组件内部开始倒计时
                            this.$refs.resetpwdCaptcha.start();
                        }, 1000);
                    } else {
                        this.$refs.uToast.show({
                            title: '倒计时结束后再发送',
                            type: 'error'
                        });
                    }
                }
            })
        },
        // 换绑手机发送短信
        resetpwdSendSms(callback) {
            const passwordRegex = /^[0-9A-Za-z]{8,12}$/;
            if (this.resetpwdForm.mobile === '') {
                this.$u.toast('请输入手机号');
                return;
            }
            if (this.resetpwdForm.newpassword === '') {
                this.$u.toast('请输入新密码');
                return;
            }
            if (!this.$u.test.mobile(this.resetpwdForm.mobile)) {
                this.$u.toast('手机号码不正确');
                return;
            }
            if (!passwordRegex.test(this.resetpwdForm.newpassword)) {
                this.$u.toast('密码长度在8-12之间且只能包含字母数字');
                return;
            }
            if (!this.resetpwdForm.imgCode) {
                this.$u.toast('请输入图形验证码');
                return;
            }
            this.$u.api.smsSend({
                mobile: this.resetpwdForm.mobile,
                newpassword: this.resetpwdForm.newpassword,
                event: 'resetpwd',
                imgCode: this.resetpwdForm.imgCode,
                key: this.resetpwdForm.key
            }).then(res => {
                if (res.code !== 1) {
                    this.$refs.uToast.show({
                        title: res.msg,
                        type: 'error'
                    });
                    this.fetchCaptcha()
                    callback(false);
                } else {
                    callback(true);
                }
            });
        },
        // 确认重置密码
        resetpwdConfirm() {
            const passwordRegex = /^[0-9A-Za-z]{8,12}$/;
            if (this.resetpwdForm.mobile === '') {
                this.$u.toast('请输入手机号');
                return;
            }
            if (this.resetpwdForm.newpassword === '') {
                this.$u.toast('请输入新密码');
                return;
            }
            if (!this.$u.test.mobile(this.resetpwdForm.mobile)) {
                this.$u.toast('手机号码不正确');
                return;
            }
            if (!passwordRegex.test(this.resetpwdForm.newpassword)) {
                this.$u.toast('密码长度在8-12之间且只能包含字母数字');
                return;
            }
            if (!this.resetpwdForm.imgCode) {
                this.$u.toast('请输入图形验证码');
                return;
            }
            if (!this.resetpwdForm.captcha) {
                this.$u.toast('请输入短信验证码');
                return;
            }
            this.$u.api.resetpwd({
                mobile: this.resetpwdForm.mobile,
                newpassword: this.resetpwdForm.newpassword,
                captcha: this.resetpwdForm.captcha
            }).then(res => {
                if (res.code === 1) {
                    this.$refs.uToast.show({
                        title: res.msg,
                        type: 'success'
                    });
                    this.$u.api.getUserInfo().then(response => {
                        if (response.code === 1) {
                            const user = response.data;
                            // 提交mutation来更新Vuex中的状态
                            this.$store.commit('user/SET_USER', user);
                            // 保存到本地存储
                            uni.setStorageSync('user', user);
                        }
                    })
                    this.resetpwdShow = false
                } else {
                    this.$refs.uToast.show({
                        title: res.msg,
                        type: 'error'
                    })
                }
            })
        },
        // 获取分享码
        copyShareCode() {
            // navigator.clipboard.writeText 该方法需要在安全域下才能够使用，比如：https 协议的地址、127.0.0.1、localhost
            navigator.clipboard.writeText(this.user.sharecode)
                .then(() => {
                    this.$refs.uToast.show({
                        title: 'Copy Success',
                        type: 'success'
                    });
                })
        }
    }
}
</script>

<style lang="scss" scoped>
.pages-my-myInfo-myInfo {
    .info {
        line-height: 100rpx;
        //margin-left: 30rpx;
        color: white;
        font-size: 34rpx;
        background-image: url("@/static/images/header-bg.png");
        background-size: cover;
        height: 100rpx;
    }

    .avatar {
        font-size: 34rpx;
        //background-color: rgb(29, 27, 74);
        height: 200rpx;
        display: flex;
        flex-direction: row;
        align-items: center;
    }

    .security {
        height: 100rpx;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        backdrop-filter: blur(10px) brightness(90%);
        background-color: #171c45;
        border-radius: 10px;

        .text {
            font-weight: 700;
            font-size: 40rpx;
            color: #fada62;
        }
    }

    .userinfo {
        //background-color: rgb(29, 27, 74);

        .userinfo-item {
            display: flex;
            align-items: center;
            height: 100rpx;
            color: white;

            .left {
                width: 600rpx;
                padding-left: 20rpx;
            }

            .center {
                width: 500rpx
            }

            .right {
                display: flex;
                flex-direction: row-reverse;
                padding-right: 20rpx;;

                .custom-style {
                    height: 50rpx;
                    color: #ffffff;
                    //background: linear-gradient(to right, #c70e97, #2c05cf);
                    background-color: #5d7ef2;
                }
            }
        }

    }
}

.popupView {
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: #0f0e2d;

    .popupView-text {
        margin: 30rpx;
    }

    .popupView-imgCode {
        width: 80%;
        display: flex;
        flex-direction: row;
        margin-top: 25rpx;
    }

    .popupView-captcha {
        width: 80%;
        display: flex;
        flex-direction: row;
        align-items: center;
        margin-top: 25rpx;
    }

    .popupView-input {
        width: 80%;
        margin-top: 25rpx;
        border-radius: 15rpx;

        ::v-deep .u-input__input {
            color: #ffffff
        }
    }

    .popupView-button {
        margin-top: 20rpx;
        margin-bottom: 10rpx;

        .popupView-button-item {
            margin: 20rpx;
        }
    }
}

::v-deep .u-type-success {
    background-color: #0f0e2d;
    border: none;
}

::v-deep .u-type-error {
    background-color: #0f0e2d;
    border: none;
}
</style>
